<template>

  <div class="layout" :style="{height:winHeight-2+'px'}">
    <Header>
      <Menu mode="horizontal" @on-select="header" theme="dark" active-name="1">
        <div class="layout-logo">
          <img src="/static/img/logo2@4x.png" alt="">
        </div>
        <!-- <div class="layout-nav">
          <MenuItem name="shopSetUp">
          <Icon type="ios-navigate"></Icon>
          商城设置
          </MenuItem>
          <MenuItem name="2">
          <Icon type="ios-keypad"></Icon>
          小程序设置
          </MenuItem>
        </div>
        <div class="userImage">
          <Dropdown>
            <a href="javascript:void(0)" class="userInfoType">
              <img src="/static/img/1.png" alt="">
              <Icon type="arrow-down-b"></Icon>
            </a>
            <DropdownMenu slot="list">
              <DropdownItem>驴打滚</DropdownItem>
            </DropdownMenu>
          </Dropdown>

        </div> -->
      </Menu>
    </Header>
    <Row type="flex" :style="{height:winHeight-2+'px'}">
      <Col span="4" class="layout-menu-left">
      <Menu @on-select="xz" active-name="homes" theme="dark" width="auto" :open-names="['1']" accordion>
        <!-- <Submenu name="7">
          <template slot="title">
            <Icon type="ios-navigate"></Icon>
            权限管理
          </template>
          <MenuItem name="addPermission">添加权限</MenuItem>
          <MenuItem name="AllocationPermissions">分配权限</MenuItem>
         <MenuItem name="1-3">修改密码</MenuItem>
        </Submenu> -->
        <Submenu name="1">
          <template slot="title">
            <Icon type="ios-navigate"></Icon>
            商城设置
          </template>
          <MenuItem name="BusinessSetting">基本信息</MenuItem>
          <!-- <MenuItem name="wxSetting">小程序设置</MenuItem> -->
          <MenuItem name="DistributionSetting">配送设置</MenuItem>
          <!-- <MenuItem name="ChangePassword">修改密码</MenuItem> -->
        </Submenu>
        <Submenu name="5">
          <template slot="title">
            <Icon type="md-grid" />
            分类管理
          </template>
          <MenuItem name="addClass">分类管理</MenuItem>
        </Submenu>
        <Submenu name="7">
          <template slot="title">
            <Icon type="md-pricetag" />
            首页活动管理
          </template>
          <!-- <MenuItem name="TaxonomyActivities">添加活动类型</MenuItem> -->
          <MenuItem name="ActivitiesTypes">添加活动类型</MenuItem>
          <!-- <MenuItem name="oneActivities">单图活动</MenuItem> -->
        </Submenu>
        <Submenu name="2">
          <template slot="title">
            <Icon type="ios-archive" />
            商品管理
          </template>
          <MenuItem name="CommodityAddition">商品列表</MenuItem>
          <!-- <MenuItem name="2-2">商品列表</MenuItem> -->
          <!-- <MenuItem name="2-3">商品添加</MenuItem> -->
        </Submenu>
        <!-- <Submenu name="11">
          <template slot="title">
            <Icon type="ios-archive" />
            商品管理new
          </template>
          <MenuItem name="CommodityAdditions">商品列表new</MenuItem>
           <MenuItem name="2-2">商品列表</MenuItem> 
           <MenuItem name="2-3">商品添加</MenuItem> 
        </Submenu> -->
        <Submenu name="6">
          <template slot="title">
            <Icon type="md-leaf" />
            商品活动管理
          </template>
          <MenuItem name="ActivityManagement">商品活动列表</MenuItem>
        </Submenu>
        <Submenu name="3">
          <template slot="title">
            <Icon type="ios-list-box" />
            订单管理
          </template>
          <MenuItem name="OrderManagement">购物车订单管理</MenuItem>
          <MenuItem name="pintuanOrderManagement">拼团订单管理</MenuItem>
        </Submenu>

        <Submenu name="9">
          <template slot="title">
            <Icon type="md-image" />
            首页单图设置
          </template>
          <MenuItem name="oneActivities">单图设置</MenuItem>
        </Submenu>
        <Submenu name="10">
          <template slot="title">
            <Icon type="md-image" />
            首页活动图设置
          </template>
          <MenuItem name="TaxonomyActivities">活动图设置</MenuItem>
        </Submenu>
        <Submenu name="4">
          <template slot="title">
            <Icon type="md-image" />
            焦点图设置
          </template>
          <MenuItem name="bannerSetting">焦点图列表</MenuItem>
        </Submenu>

        <Submenu name="8">
          <template slot="title">
            <Icon type="md-people" />
            会员管理
          </template>
          <MenuItem name="MembershipList">会员列表</MenuItem>

        </Submenu>

      </Menu>
      </Col>
      <Col span="20" style="overflow-y:auto">
      <!-- <div class="layout-header">
        <BreadcrumbItem to="/">Home</BreadcrumbItem>
        <BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
      </div> -->
      <div class="layout-content">
        <div class="layout-content-main">
          <router-view></router-view>
        </div>
      </div>
      <div class="layout-copy">
        2011-2016 &copy; TalkingData
      </div>
      </Col>
    </Row>
  </div>
</template>

<script type="text/ecmascript-6">
import router from "../router/index";
export default {
  data() {
    return {
      winHeight: $(window).innerHeight(),
      visible: false
    };
  },
  mounted() {
    window.onresize = () => {
      return () => {
        window.screenHeight = document.body.clientHeight;
        this.winHeight = window.screenHeight;
      };
    };
  },
  methods: {
    handleClose: function() {
      let that = this;
      that.visible = false;
      console.log(that.visible);
    },
    xz: function(e) {
      console.log(e);
      router.push({
        path: "/" + e
      });
    },
    header: function(e) {
      router.push({
        path: "/" + e
      });
    }
  }
};
</script>

<style scoped>
.ivu-select-dropdown {
  top: 40px !important;
}
.ivu-dropdown-rel {
  height: 40px !important;
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-logo {
  width: 200px;
  height: 42px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 5px;
  left: 20px;
}
.layout-logo img {
  height: 50px;
  width: 200px;
  border-radius: 5px;
}
.layout-nav {
  /* width: 520px; */
  position: absolute;
  right: 40px;
  margin: 0 auto;
  margin-right: 20px;
}

.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
}
.layout-breadcrumb {
  padding: 10px 15px 0;
}
.layout-content {
  min-height: 200px;
  margin: 15px;
  overflow-y: auto;
  background: #fff;
  border-radius: 4px;
}
.layout-content-main {
  padding: 10px;
}
.layout-copy {
  text-align: center;
  padding: 10px 0 20px;
  color: #9ea7b4;
}
.layout-menu-left {
  background: #464c5b;
}
.layout-header {
  height: 60px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.layout-logo-left {
  width: 90%;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  margin: 15px auto;
}
</style>
